<template>
  <el-table
    :data="tableArray"
    :span-method="arraySpanMethod"
    border
    style="width: 100%"
  >
    <el-table-column
      v-for="(item, index) in tableHeaderArray"
      :key="index"
      :label="item.label"
      :prop="item.value"
      align="center"
      min-width="100px"
      :show-overflow-tooltip="true"
    />
  </el-table>
</template>
<script>
export default {
  props: {
    tableData: {
      type: Array,
      default: () => {
        return []
      }
    },
    tableHeader: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      tableArray: [],
      tableHeaderArray: [],
      spanArr0: [],
      spanArr1: [],
      spanArr2: []
    }
  },
  watch: {
    tableData: {
      immediate: true,
      handler(val) {
        this.tableArray = val
        this.handleSpanArray(val)
      }
    },
    tableHeader: {
      immediate: true,
      handler(val) {
        this.tableHeaderArray = val
      }
    }
  },
  methods: {
    arraySpanMethod({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (this.spanArr0[rowIndex]) {
          return {
            rowspan: this.spanArr0[rowIndex],
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
      if (columnIndex === 1) {
        if (this.spanArr1[rowIndex]) {
          return {
            rowspan: this.spanArr1[rowIndex],
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
      if (columnIndex === 2) {
        if (this.spanArr2[rowIndex]) {
          return {
            rowspan: this.spanArr2[rowIndex],
            colspan: 1
          }
        } else {
          return {
            rowspan: 0,
            colspan: 0
          }
        }
      }
    },
    handleSpanArray(tableList) {
      let flag0 = 0
      let flag1 = 0
      let flag2 = 0
      this.spanArr0 = []
      this.spanArr1 = []
      this.spanArr2 = []
      tableList.forEach((item, index) => {
        if (index === 0) {
          this.spanArr0.push(1)
          this.spanArr1.push(1)
          this.spanArr2.push(1)
        } else {
          // col1
          if (item.col1 === tableList[index - 1].col1) {
            this.spanArr0[flag0] += 1
            this.spanArr0.push(0)
          } else {
            flag0 = index
            this.spanArr0.push(1)
          }
          // col2
          if (item.col1 === tableList[index - 1].col1 && item.col2 === tableList[index - 1].col2) {
            this.spanArr1[flag1] += 1
            this.spanArr1.push(0)
          } else {
            flag1 = index
            this.spanArr1.push(1)
          }
          // col3
          if (item.col1 === tableList[index - 1].col1 && item.col2 === tableList[index - 1].col2 && item.col3 === tableList[index - 1].col3) {
            this.spanArr2[flag2] += 1
            this.spanArr2.push(0)
          } else {
            flag2 = index
            this.spanArr2.push(1)
          }
        }
      })
    }
  }
}
</script>
